<template>
  <div>
    <el-table
      :data="cardList"
      style="width: 100%">
      <el-table-column
        label="ID"
        prop="id"
        width="100">
      </el-table-column>
      <el-table-column
        label="名字"
        prop="name"
        width="100">
      </el-table-column>

      <el-table-column
        label="公司"
        prop="company"
        width="100">
      </el-table-column>

      <el-table-column
        prop="birthday"
        label="出生日期">
      </el-table-column>

      <el-table-column
        align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页显示  -->
    <div :class="pageClass">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "CardLikes",
  data() {
    return {
      user: this.$store.getters.getUser, // 获取了登录人的信息
      msg: '卡片列表',
      pageClass: "myPage",
      pageSize: 10,
      currentPage: 1, //默认显示的第几页,真实是数据是后端返回的
      total: 10, // 总共多少条数据,真实是数据是后端返回的
      dialogVisible: false,
      cardList: [],
    }
  },
  methods: {
    handleDelete(row) {
      let vm = this;
      this.axios({
        url: `http://localhost:8888/user/like?userId=${vm.user.id}&cardId=${row.id}&like=false`,
        method: 'GET'
      }).then(function (res) {
        if (res.data.code == 0) {
          vm.$message.success('删除成功!');
          // 更新用户对象
          let user = res.data.data;
          console.log(user)
          vm.user = user;
          // 通知整个整个应用 人员信息修改了
          vm.$store.commit('updateUser', user);
          vm.getCardList(vm.currentPage, vm.pageSize);
        }
      });
    },
    // 每页显示几条数据
    handleSizeChange(pageSize) {
      // 查询用户列表
      this.getCardList(this.currentPage, pageSize);
    },
    // 切换第几页
    handleCurrentChange(pageIndex) {
      // 查询用户列表
      this.getCardList(pageIndex, this.pageSize);
    },
    getCardList(pageIndex, pageSize) {
      // 发送axios请求
      let vm = this;
      this.axios({
        url: `http://localhost:8888/card/like?pageIndex=${pageIndex}&pageSize=${pageSize}&ids=${vm.user.liked}`,
        method: 'GET'
      }).then(function (res) {
        // 获取名片列表
        vm.cardList = res.data.data.list;
        vm.total = res.data.data.total;
        vm.pageSize = res.data.data.pageSize;
        vm.currentPage = res.data.data.pageNum;
      });
    }
  },
  mounted() {
    // 页面挂载的时候请求获取喜欢的名片列表
    this.getCardList(1, 10);
  }
}
</script>

<style scoped>

</style>
